<#assign base=request.contextPath />
<!DOCTYPE html>
<html>
<head>
  <base href="${base}">
  <meta charset="utf-8">
  <title>通知公告</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${base}/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${base}/css/my.css" media="all">
  <link rel="stylesheet" href="${base}/css/font-awesome.min.css" media="all">
</head>

<body>
  	<div class="layui-form one" lay-filter="LAY-form-list" style="padding: 10px">
  		<input type="hidden" name="oid" value="${(tongbao.oid)!}">
  		<input type="hidden" id="recDepIds" name="recDepIds" value="${(tongbao.recDepIds)!}">
    	<div class="layui-form-item">
      		<label class="layui-form-label required">标题</label>
      		<div class="layui-input-block">
        		<input type="text" name="title" value="${(tongbao.title)!}" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      		</div>
    	</div>
    	<div class="layui-form-item flex1">
      		<label class="layui-form-label">过期时间</label>
      		<div class="layui-input-block">
        		<input type="text" id="expTime" name="expTime" placeholder="为空时，表示永不过期" value="${(tongbao.expTime)!}" autocomplete="off" class="layui-input">
      		</div>
    	</div>
    	<div class="layui-form-item">
				<label class="layui-form-label">激活状态</label>

				<div class="layui-input-inline" style="width:80px">
		      	<input type="checkbox" ${(!tongbao?? || (tongbao.status)==1)?string('checked','')} lay-skin="switch" name="status" value="1" lay-text="激活|禁用">
		    </div>
		    <label class="layui-form-label" style="width:120px">包括所有下级单位</label>
		    <div class="layui-input-inline">
		      	<input type="checkbox" ${(!tongbao?? || (tongbao.downDeptShow)==1)?string('checked','')} lay-skin="switch" name="downDeptShow" value="1" lay-text="是|否">
		    </div>
			</div>
	    <div class="layui-form-item">
	      	<label class="layui-form-label">接收单位</label>
	      	<div class="layui-input-block flex">
	        	<textarea id="recDepNames" readonly="readonly" name="recDepNames" autocomplete="off" class="layui-textarea">${(tongbao.recDepNames)!}</textarea>
            	<button type="button" id="selectDept" class="layui-btn" style="flex:80px; margin-left:10px;">
            		<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>选择
            	</button>
	      	</div>
	    </div>

    	<div class="layui-form-item flex1">
	      	<label class="layui-form-label required">公告内容</label>
	      	<div class="layui-input-block flex-1">
	        	<textarea id="content" name="content" autocomplete="off">${(tongbao.content)!}</textarea>
	      	</div>
	    </div>

		<div class="layui-form-item flex1">
			<label class="layui-form-label">附件</label>
			<button type="button" class="layui-btn" id="upload">
	  			<i class="layui-icon">&#xe67c;</i> 上传附件
			</button>
			<input type="hidden" id="files" name="files" value='${(tongbao.files)!}'>
		</div>
		<div class="upload-file flex" id="uploadfiles"></div>

	    <div class="layui-form-item layui-hide">
	      	<input type="button" lay-submit lay-filter="LAY-form-submit" id="LAY-form-submit" value="确认添加">
	      	<input type="button" lay-submit lay-filter="LAY-form-edit" id="LAY-form-edit" value="确认编辑">
	    </div>
  	</div>

  <script id="myfiles" type="text/html">
	{{#  layui.each(d, function(index, item){ }}
		<div class="file-itme" id="{{item.id}}">
			<div><i class="fa fa-file" aria-hidden="true"></i> {{item.title}}</div>
			<a href="javascript:delfile('{{item.id}}')">删除</a>
		</div>
	{{#  }); }}
  </script>

  <script src="${base}/js/lib/jquery-1.11.3.min.js"></script>
  <script src="${base}/layuiadmin/layui/layui.js"></script>
  <script>
  	function delfile(id) {
  		parent.layer.confirm('确定删除该文件吗？', function(idx) {
  			parent.layer.close(idx);

	  		var files = $('#files').val();
	  		var arr = JSON.parse(files);
	  		var arr2 = [];
	  		for(var i=0; i<arr.length; i++) {
	  			if(arr[i].id != id) {
	  				arr2.push(arr[i]);
	  			}
	  		}
	  		$('#files').val(JSON.stringify(arr2));
	  		$('#'+id).remove();
  		});
	}

  	layui.config({
    	base: '${base}/layuiadmin/' //静态资源所在路径
  	}).extend({
    	index: 'lib/index',
    	jwt: '{/}${base}/js/lib/jwt'
  	}).use(['index', 'form', 'jwt', 'layedit', 'laydate', 'upload'], function(){
    	var $ = layui.$;
    	var form = layui.form;
    	var jwt = layui.jwt;
    	var layedit = layui.layedit;
    	var upload = layui.upload;
    	var laytpl = layui.laytpl;

    	//建立编辑器
    	layedit.set({
  			uploadImage: {
    			url: '${base}/upload/image'
  			}
		});
    	var editIdx = layedit.build('content', {height: 180});
    	layui.laydate.render({elem: '#expTime'});
    	// 文件上传
    	upload.render({
  			elem: '#upload',
  			url: '${base}/upload/file',
  			accept: 'file', //所有文件
  			multiple: true, //多文件上传
  			done: function(data, index, upload) {
  				if(data.code != 0) {
  					layer.msg(data.msg);
  					return false;
  				}
  				// 合并数组
  				var files = data.data;
  				if($('#files').val()) {
  					files = JSON.parse($('#files').val());
  					files = files.concat(data.data);
  				}
  				$('#files').val(JSON.stringify(files));
  				// 填充页面
  				laytpl($('#myfiles').html()).render(data.data, function(txt) {
  					$('#uploadfiles').append(txt);
  		  		});
  			}
    	});

    	<#if (tongbao.files)??>
    		var datastr = '${tongbao.files}';
    		if(datastr) {
	    		var data = JSON.parse(datastr);
	    		// 填充页面
				laytpl($('#myfiles').html()).render(data, function(txt) {
					$('#uploadfiles').append(txt);
		  		});
    		}
    	</#if>

    	//监听提交
    	form.on('submit(LAY-form-submit)', function(data) {
    		// 富文本框的值
    		data.field.content = layedit.getContent(editIdx);
      		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
      		//提交ajax成功后，关闭当前弹层并重载表格
      		$.ajax({
      			url: '${base}/comm/tongbao/save',
      			data: data.field,
      			success: function(json) {
      				parent.layui.table.reload('LAY-table'); //重载表格
      	      		parent.layer.close(index); //再执行关闭
      			}
      		});
    	});

    	//选择单位：多选
    	$('#selectDept').click(function() {
    		var ids = $('#recDepIds').val();
    		parent.layer.open({
          		type: 2,
          		title: '选择机构',
          		content: '${base}/system/dept/html/orgTree?ids=' + ids,
          		maxmin: true,
          		area: ['400px', '400px'],
          		btn: ['确定', '取消'],
          		yes: function(index, layero){
          			// 获得iframe中的变量
          			var authtree = layero.find('iframe')[0].contentWindow.authtree;
          			if(authtree) {
          				var nodes = authtree.getCheckedNode('#LAY-auth-tree');
          				if(nodes.length == 0) {
          					parent.layer.close(index);
          					return false;
          				}

          				var ids = ",", names = [];
          				for(var i=0; i<nodes.length; i++) {
          					ids += nodes[i].value + ",";
          					names.push(nodes[i].name);
          				}
          				$('#recDepIds').val(ids);
          				$('#recDepNames').val(names.join("，"));

          				parent.layer.close(index);
          			}
          		}
        	});

    	});
  	})
  </script>
</body>
</html>